<project-header class="top-header"></project-header>
<project-page class="overview">

  <!-- Middle section -->
  <div class="middle-section">
    <div class="middle-container">
      <div class="middle-content  has-scroll surface-shaded" in-view-container>
        <div class="container-fluid surface-shaded">
          <tasks></tasks>
          <alerts alerts="alerts"></alerts>
          <div class="row">
            <div class="col-md-12">
              <!-- Empty states -->
              <div ng-if="renderOptions.showGetStarted">
                <!-- Getting started -->
                <div class="empty-project text-center">
                  <div ng-if="project.metadata.name | canIAddToProject">
                    <h2>Get started with your project.</h2>
                    <p class="gutter-top">
                      Use your source or an example repository to build an application
                      image, or add components like databases and message queues.
                    </p>
                    <p class="gutter-top">
                      <a ng-href="project/{{projectName}}/create" class="btn btn-lg btn-primary">
                        Add to Project
                      </a>
                    </p>
                  </div>
                  <div ng-if="!(project.metadata.name | canIAddToProject)">
                    <h2>Welcome to project {{projectName}}.</h2>
                    <ng-include src="'views/_request-access.html'"></ng-include>
                  </div>
                </div>
              </div>
              <div ng-if="renderOptions.showLoading" class="loading-message">
                Loading...
              </div>
              <div class="service-group-with-route-row" ng-repeat="service in topLevelServices"
                   ng-if="service.metadata.labels.app || routesByService[service.metadata.name].length || childServicesByParent[service.metadata.name].length">
                <overview-service-group></overview-service-group>
              </div>
              
              <div row wrap class="standalone-service-row">
                <div
                    ng-repeat="service in topLevelServices"
                    ng-if="!service.metadata.labels.app && !routesByService[service.metadata.name].length && !childServicesByParent[service.metadata.name].length"
                    class="standalone-service">
                  <overview-service-group></overview-service-group>
                </div>
              </div>
            
              <!-- Unserviced DCs, RCs, and pods -->
              <div row wrap ng-if="(monopodsByService[''] | hashSize) > 0 || (deploymentConfigsByService[''] | hashSize) > 0 || (deploymentsByService[''] | hashSize) > 0" class="unserviced-row">
                <!-- unserviced DC -->
                <div ng-repeat="(dcName, deploymentConfig) in deploymentConfigsByService[''] track by (deploymentConfig | uid)"
                    class="no-service"
                    ng-if="deployments = visibleDeploymentsByConfigAndService[''][dcName]"> <!-- Must be an ng-if, an ng-init will not re-evaluate properly -->
                  <overview-deployment-config class="deployment-tile-wrapper"></overview-deployment-config>
                </div>
                <!-- /unserviced DC -->

                <!-- unserviced RC -->
                <div ng-repeat="deployment in deploymentsByService[''] | orderObjectsByDate : true track by (deployment | uid)"
                    ng-if="!(deployment | annotation : 'deploymentConfig') || !deploymentConfigs[(deployment | annotation : 'deploymentConfig')]"
                    class="no-service">
                  <overview-replication-controller class="deployment-tile-wrapper"></overview-replication-controller>
                </div>
                <!-- /unserviced RC-->

                <!-- unservice monopods -->
                <div ng-repeat="pod in monopodsByService[''] | orderObjectsByDate : true track by (pod | uid)"
                    class="no-service">
                  <overview-pod class="deployment-tile-wrapper"></overview-pod>
                </div>
                <!-- /unserviced monopods -->
              </div>
              
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</project-page>
